<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鸡兔同笼问题</title>
<style>
    body {
        font-family: 'Courier New', Courier, monospace;
        font-size: 30px;
        background-color: #00FFFF; /* 浅蓝色背景 */
        color: #000000; /* 黑色文字 */
        text-align: center;
   }
    input[type="number"] {
        width: 50px;
        text-align: center;
    }
    .result {
        font-weight: bold;
        color: rgb(52, 88, 221); /* 红色文字 */
        width: 90%;
        margin: 0 auto;
        text-align: center;
        background-color: #D3D3D3; /* 灰色背景 */
        padding: 10px; /* 内边距 */
        box-shadow: 0 0 10px 5px rgba(0,0,0,0.2); /* 阴影效果 */
    }
    .result2 {
        font-weight: bold;
        color: red; /* 红色文字 */
        width: 90%;
        margin: 0 auto;
        text-align: center;
        background-color: #D3D3D3; /* 灰色背景 */
        padding: 10px; /* 内边距 */
        box-shadow: 0 0 10px 5px rgba(0,0,0,0.2); /* 阴影效果 */
    }
    .container {
        width: 60%;
        margin: 0 auto;
        background-color: aqua; /* 浅蓝色背景 */
        min-height: 220px;
    }
    h1 {
        text-align: center;
        padding-top: 10px;
    }
</style>
</head>
<body>
<div class="container">
    <h1>循环解决鸡兔同笼问题</h1>
    <p>鸡兔一共<input type="number" id="totalAnimals" value="42" min="1">只。笼子里脚一共<input type="number" id="totalLegs" value="94" min="1">只，请问分别有多少只鸡和兔？<button onclick="calculate()">计算</button></p>
    <p class="result" id="result"></p>
</div>

<script>
    function calculate() {
        var totalAnimals = parseInt(document.getElementById('totalAnimals').value, 10);
        var totalLegs = parseInt(document.getElementById('totalLegs').value, 10);
        var rabbits = (totalLegs - 2 * totalAnimals) / 2;
        var chickens = totalAnimals - rabbits;

        if (rabbits < 0 || chickens < 0 || rabbits % 1 !== 0 || chickens % 1 !== 0) {
            document.getElementById('result').textContent = "无解";
            document.getElementById('result').className = "result2"; // 确保无解时也应用result类
        } else {
            document.getElementById('result').textContent = "鸡: " + chickens + " 只, 兔: " + rabbits + " 只";
            document.getElementById('result').className = "result";
        }
    }
</script>
</body>
</html>